<template>
  <div class="rentDetails" v-wechat-title="title">
    <div class="title_wrapper">
      <div class="store_title">{{store.store_title}}</div>
      <div class="title_xiao">
        <div class="zi_30 hui_zi">编号：<span class="hei_zi">{{store.store_id}}</span></div>
        <div class="zi_30 hui_zi">浏览量：<span class="hei_zi">{{store.setbrowse}}</span></div>
      </div>
    </div>
    <div class="zhan_hui"></div>
    <div class="info_wrapper">
      <div class="hui_zi zi_30">意向区域：<span class="hei_zi">{{store.store_quyu}}</span></div>
      <div class="hui_zi zi_30" v-if="store.store_city!==''">优先区域：<span class="hei_zi">{{store.store_city}}</span></div>
      <div class="hui_zi zi_30">经营行业：<span class="hei_zi">{{store.store_category}}-{{store.categoryclass}}</span></div>
    </div>
    <div class="boder"></div>
    <div class="info_wrapper">
      <div class="hui_zi zi_30">租金预算：<span class="hong_zi jiacu">{{store.store_money}}</span><span class="hei_zi">/月</span></div>
      <div class="hui_zi zi_30">面积范围：<span class="hong_zi">{{store.store_area}}㎡</span></div>
      <div class="hui_zi zi_30">转&nbsp;&nbsp;让&nbsp;&nbsp;费：
        <span class="hei_zi" v-if="store.store_move_money=='1'">接受</span>
        <span class="hei_zi" v-if="store.store_move_money=='0'">不接受</span>
      </div>
      <div class="hui_zi zi_30">意向楼层：<span class="hei_zi">{{store.floor}}</span></div>
    </div>
    <div class="zhan_hui"></div>
    <company-facility :facility="facility"></company-facility>
    <company-bottom :name="store.store_user" :showCertify="store.is_collection" :id="store.store_id"></company-bottom>
  </div>
</template>

<script>
import CompanyFacility from './components/CompanyFacility'
import CompanyBottom from './components/CompanyBottom'
import facility from '../../assets/json/facility.json'
export default {
  name: 'rentDetails',
  components: {
    CompanyFacility,
    CompanyBottom
  },
  data () {
    return {
      store_id: this.$route.params.id,
      bannerImg: [],
      store: [],
      facility: facility,
      title: '求租详情'
    }
  },
  beforeMount () {
    this.getShopInfo()
  },
  methods: {
    getShopInfo () {
      this.$axios.post(process.env.API_HOST + '/api/wanted/detail', {
        id: this.store_id
      }).then(this.getShopInfoSucc)
        .catch(error => console.log(error))
    },
    getShopInfoSucc (res) {
      if (res.data.code === 1) {
        this.store = res.data.data
        this.title = this.store.store_title
        let facilityL = res.data.data.facility
        if (facilityL !== '') {
          let facilityA = facilityL.split(',')
          for (var i = 0; i < facilityA.length; i++) {
            for (var k = 0; k < this.facility.length; k++) {
              if (facilityA[i] === this.facility[k]['title']) {
                this.facility[k]['is_action'] = true
              }
            }
          }
        }
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.title_wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  div
    height .38rem /* 19/50 */
    line-height .38rem /* 19/50 */
    margin-bottom .1rem /* 10/50 */
  .store_title
    font-size .4rem /* 20/50 */
    font-weight bold
    line-height .6rem
    height auto
    text-overflow -o-ellipsis-lastline
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp 2
    line-clamp 2
    -webkit-box-orient vertical
  .title_xiao
    display flex
    div
     margin-right .68rem /* 34/50 */
.zhan_hui
  width 100%
  height .2rem /* 10/50 */
  background #F8F8F8
.info_wrapper
  padding .3rem /* 10/50 */ .4rem /* 20/50 */
  div
    line-height .48rem /* 24/50 */
    margin-bottom .1rem
.boder
  width 100%
  height .02rem /* 1/50 */
  background:rgba(0,0,0,.1)
.info_details
  border-top 1px solid rgba(0,0,0,.1)
  margin-top .2rem /* 10/50 */
  padding-top .13rem /* 6.5/50 */
  li
    float left
    width 50%
    line-height .54rem /* 27/50 */
.map_wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  margin-bottom 1.54rem /* 77/50 */
.title
  height .74rem /* 37/50 */
  font-size .36rem /* 18/50 */
  font-weight bold
  line-height .74rem /* 37/50 */
  color #333333
</style>
